<template>
    <div class="body-bg">
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark top">
                    <div class="logo">
                        <div class="logo-img">
                            <img @click="first()" src="../assets/logo.jpg" alt="">
                            <!-- <span>造价咨询我们是专业的</span> -->
                        </div>

                        <div class="types">
                            <span v-if="types==1">单项对比</span>
                            <span v-else-if="types==2">指标分析</span>
                            <span v-else></span>
                        </div>
                        
                        <div class="logo-user">
                            <el-dropdown>
                                <i class="el-icon-s-custom el-icon-arrow-down el-icon--right">
                                    <!-- <span v-if="list == ''">haitian001</span> -->
                                    <!-- <span v-else> -->
                                        {{list}}
                                    <!-- </span> -->
                                    
                                </i>
                                <!-- <i class="el-icon-caret-bottom bottom"></i> -->
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>
                                        <i class="el-icon-user"></i>个人中心
                                    </el-dropdown-item>
                                    <div @click="clo()">
                                        <el-dropdown-item>
                                            <i class="el-icon-switch-button"></i>退出登录
                                        </el-dropdown-item>
                                    </div>
                                    
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                        <div class="logo-con"  @click="first()">
                            <i class="el-icon-s-home">
                                <span>首页</span>
                            </i>
                        </div>
                        <!-- <div class="help">
                            <el-dropdown>
                                <i class="el-icon-question">
                                    <span>帮助中心</span>    
                                </i>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>
                                        <i class="el-icon-document"></i>更新日志
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        <i class="el-icon-edit-outline"></i>问题反馈
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        联系我们: 15038024070
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div> -->
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    data(){
        return{
            list: []
        }
    },
    mounted(){
        let data = localStorage.getItem('userMess'); 
        let con = JSON.parse(data);
        this.list = con.name;
    },
    methods:{
        first() {
            this.$router.push({ path: "myObject" });
        },
        clo(){
           window.localStorage.removeItem('userMess');
            this.$router.push({ path: "/" });
        },
    }
}
</script>
<style lang="stylus" scoped>
    .body-bg {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      overflow-y: auto;
      background-color: #fff;
    }
    .top{
        width:100%;
        height:5rem;
        box-shadow: 1px 3px 2px #888888;
    }
    .logo img{
        width: 12rem;
        height: 3rem;
        float: left;
        margin-top: 1rem;
        margin-left: 2rem;
    }

    .logo-img span {
        float:left;
        font-size:1.1rem;
        margin-top:3rem;
        margin-left:1rem;
        color :#409EFF;
    }
    .logo-con{
        width :10%;
        line-height :6rem;
        float:right;
        margin-left:10%;
    }
    .logo-con i{
        font-size:1.2rem;
        margin-top :3rem;
    }
    .logo-con i span{
        margin-left :0.5rem;
    }
    .logo-con i:hover{
        color:#409EFF;
        cursor:pointer
    }
    .logo-user{
        width :10%;
        line-height :6rem;
        float:right;
    }
    .logo-user i{
        font-size:1.2rem;
        margin-top :3rem;
    }
    .logo-user i span{
        margin-left:1.5rem;
    }
    .logo-user i:hover{
        color:#409EFF;
        cursor:pointer
    }
    .logo-user i .bottom{
        float:left;
        width :2%;
        margin-left:100%;
        margin-top :-13%;
    }
    el-dropdown{
        margin-top:-1rem;
    }
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
    .el-icon-arrow-down {
        font-size: 2rem;
    }
    .help i{
        font-size:1.5rem;
        margin-top :3rem;
    }
    .help i span {
        font-size:1.2rem;
        margin-left :0.8rem;
        margin-top:1rem;
    }
   .help i:hover{
        color:#409EFF;
        cursor:pointer
    }
</style>